<template>
  <div class="goods-list">
    <!-- <router-link :to="'/home/goodsinfo/'+item.id" tag='div' class="goods-item" v-for='item in goodLsit' :key='item.id'>
      <div class="goods-img">
        <img :src="item.img_url" alt>
      </div>
      <div class="goods-info">
        <h3>{{item.title}}</h3>
        <p class="price">
          <span>¥{{item.sell_price}}</span>
          <span>¥{{item.market_price}}</span>
        </p>
        <p class="status">
          <span>热卖中</span>
          <span>剩余{{item.stock_quantity}}件</span>
        </p>
      </div>
    </router-link> -->

    <!-- 在网页中，有两种跳转方式 -->
    <!-- 方式1：使用a标签 的形式 叫做 标签跳转 -->
    <!-- 方式2：使用 window.location.href 的形式 叫做 编程式导航 -->

    <div class="goods-item" v-for='item in goodLsit' :key='item.id' @click='getDetail(item.id)'>
      <div class="goods-img">
        <img :src="item.img_url" alt>
      </div>
      <div class="goods-info">
        <h3>{{item.title}}</h3>
        <p class="price">
          <span>¥{{item.sell_price}}</span>
          <span>¥{{item.market_price}}</span>
        </p>
        <p class="status">
          <span>热卖中</span>
          <span>剩余{{item.stock_quantity}}件</span>
        </p>
      </div>
    </div>






    <mt-button v-if="flag" @click='getMore' type='default' size='normal' plain>加载更多</mt-button>
  </div>
</template>

<script>
import {Toast} from 'mint-ui'
export default {
  data() {
    return {
        pageindex:1,// 默认第一页
        goodLsit:[],
        flag:true,
    };
  },

  methods: {
      getGoods(){
          this.$http.get('api/getgoods?pageindex='+ this.pageindex).then(res=> {
              if(res.body.status === 0) {
                if(res.body.message.length > 0) {
                    this.goodLsit = this.goodLsit.concat(res.body.message);
                } else {
                  this.flag = false;
                    return Toast('没有更多数据了');
                }
              } else {
                  Toast('获取商品失败');
              }
        })
      },
      getMore(){
          this.pageindex += 1;
          this.getGoods();
      },
      getDetail(id) {
          // 使用 js 的形式 进行 路由
          // 注意；区分 this.$route 和 this.$router
          // this.$route 是 路由参数对象，所有路由的参数 params 和 query
          // this.$router 是一个路由导航对象，可以通过js代码实现路由的前进、后退、跳转到新的url地址
          //    1. 最简单的方式 
          //   this.$router.push('/home/goodsinfo/'+id);
          //    2. 传递对象
          //   this.$router.push({ path:'/home/goodsinfo/'+id});
          //    3. 传递命名的路由 goodsinfo
          this.$router.push({ name: 'goodsinfo', params:{id} });

      }
  },

  created() {
      this.getGoods()
  }
};
</script>

<style lang='less' scoped>
.goods-item {
  padding: 8px 15px 0px;
  display: flex;
  justify-content: space-between;
  background-color: #f9f9f9;
  border-bottom: 1px solid #dbdbdb;
  .goods-img {
    img {
      width: 100px;
      height: 100px;
    }
  }
  .goods-info {
    padding-left: 10px;
    h3 {
      margin: 5px;
      font-size: 14px;
      line-height: 22px;
      max-height: 44px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-all;
      overflow: hidden;
      color: #4b566a;
    }
    .price {
        margin-bottom: 5px;
        span:first-of-type {
            font-size: 16px;
            color: #eb5211; 
        }
        span:last-of-type {
            margin-left: 2px;
            font-size: 11px;
            text-decoration: line-through;
        }
    }
    .status {
        font-size: 12px;
        display:flex;
        justify-content: space-between;
    }
  }
}
button {
    width: 80%;
    margin: 10px 0;
    margin-left: 50%;
    transform: translateX(-50%);
}
</style>
